<template name="shareImages">
	<view v-if="canvasHidden">
		<canvas canvas-id="myCanvas" style="width:375px;height:433px;background:#fff;" />
	</view>
</template>

<script>
	var app = getApp();
	import http from "@/common/js/request.js"
	export default {
		name: 'shareImages',
		data() {
			return {
				canvasHidden: true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
				screenWidth: "",
				screenHeight: "",
				qrcodeBaseUrl: 'http://hongsancheyi.qidian2018.com/qrcode/build?text=',

			};
		},
		mounted() {
			// 在组件实例进入页面节点树时执行
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.screenWidth = res.screenWidth,
					that.screenHeight = res.screenHeight
				}
			})
		},
		methods: {
			saveImg(e) {
				var that = this;
				console.log(that.screenWidth, that.screenHeight)
				http.post("/api/v1/member/member_info", {}, function(res) {

					uni.downloadFile({
						url: res.datas.avatar,
						success(resavatar) {
							//下载头像
							console.log("头像", resavatar.tempFilePath);
							// http.post("/api/v1/common/get_share_goods_img",{
							//  goods_id:app.globalData.giveGoodsInfo.id
							// },function(goodsres){
							//  console.log("商品图片",goodsres)
							// })
							uni.downloadFile({
								url: app.globalData.giveGoodsInfo.image,
								success(goodsres) {
									//下载商品
									console.log("商品图片", goodsres.tempFilePath)
									uni.downloadFile({
										url: that.qrcodeBaseUrl,
										success(qrcoderes) {
											//下载二维码
											console.log("二维码", qrcoderes.tempFilePath);
											console.log(resavatar.tempFilePath, goodsres.tempFilePath, qrcoderes.tempFilePath, res.datas.nickname)
											//把当前画布指定区域的内容导出生成指定大小的图片
											var unit = that.screenWidth / 375;
											console.log('unit', unit)
											// var butback = "http://petark-qiniu.qidian2018.com/c20453ef0a2b2c6fb7dc2556845ad945.png?v=854199";
											const ctx = uni.createCanvasContext('myCanvas', that)
											// ctx.drawImage(butback, 0, 0, 375, 433);
											ctx.setFillStyle('red')
											ctx.fillRect(10, 10, 150, 75)
											ctx.draw()
										},
										fail: function() {
											uni.showToast({
												title: '二维码异常',
												icon: 'none'
											})
										}
									})


								},
								fail: function() {
									uni.showToast({
										title: '商品图片异常',
										icon: 'none'
									})
								}
							})
						},
						fail(res) {
							uni.showToast({
								title: '用户头像异常',
								icon: 'none'
							})
						}
					})
				})
			}
		}
	}
</script>

<style>

</style>
